<template>
	<!-- 页面内容--还款 页面 -->
	<view style="width: 100vw; min-height: 100vh;background-color: #1F2022; color: #fff;">
		<formheadVue headname="NeoLoan " :pagenum='5' :showback='true'></formheadVue>

		<view class="P-head">
			<p v-if='isLate' style="color: #FFF584; width: 100%;text-align: center;">{{$t('index.late')}}
				<span style="color: red;margin-left: 20rpx;font-size: 18px;"> {{latedays}}</span>
				{{$t('index.day')}}
			</p>
			<p v-else style="width: 100%;text-align: center;">{{$t('index.pay')}}</p>
			<view class="P-1 ">
				<view class="flexcenter" style="color: #88878A;">
					<p>{{$t('money.Repaymentamount')}}</p>
				</view>
				<view class="flexcenter">
					<p class="flexcenter gradient-text">
						<span style="font-size: 50rpx; margin-right: 20rpx;">฿</span>{{formatAmount(repaymoney)}}
					</p>
				</view>
				<view class="P-infos flexrowspacebetween">
					<view class="flexrowstart">
						<image src="../../static/paydayicon.png" mode=""></image>
						<p>{{$t('money.Paymentdate')}}</p>
					</view>
					<p class="day">{{repayday}}</p>
				</view>
				<view class="P-2 flexrowspacebetween">
					<p @click="openExtendPage()" class="flexcenter" style="background-color: #D39AF0;">
						{{$t('index.extendday')}}
						{{canextendDayNumber}}
						{{$t('index.day')}}
					</p>
					<p class="flexcenter" @click="openChannelMenu('00')">{{$tc('index.repaying')}}</p>
				</view>
			</view>
			<view v-if='isLate' class="P-3">
				<view class="flexcenter" style="margin-bottom: 20rpx;">
					<image src="../../static/failedicon.png" mode=""></image>
					<p style="font-size: 36rpx;">{{$t('index.worning')}}</p>
				</view>
				{{$tc('index.worningtipsone')}} {{latedays}} {{$t('money.day')}} {{$tc('index.worningtipstwo')}}
			</view>
			<view class="P-switch flexrowspacearound">
				<p @click="switchView('left')" :style="{
			backgroundColor : showInfo ? '#342C42' : '#BCA3F3',
	    	color: showInfo ? '#fff' : '#000',
		}">
					{{$t('index.payword')}}
				</p>
				<p @click="switchView('right')" :style="{
					backgroundColor : showInfo ? '#BCA3F3' : '#342C42',
					
						color: showInfo ? '#000' : '#fff',
				}">
					{{$t('index.detail')}}
				</p>
			</view>
			<view v-if="showInfo" class="P-switchView">
				<view class="P-switchView-right">
					<view class="flexrowspacebetween P-line">
						<p>{{$t('money.Repaymentamount')}}</p>
						<p class="p-money">฿ {{formatAmount(repaymoney)}}</p>
					</view>
					<view class="pline"></view>
					<view class="flexrowspacebetween P-line">
						<p>{{$t('money.Paymentdate')}}</p>
						<p class="p-money">{{repayday}}</p>
					</view>
					<view class="pline"></view>
					<view class="flexrowspacebetween P-line">
						<p>{{$t('money.Loanamount')}}</p>
						<p class="p-money">฿ {{formatAmount(applymoney)}}</p>
					</view>
					<view class="pline"></view>
					<view class="flexrowspacebetween P-line">
						<p>{{$t('money.interest')}}</p>
						<p class="p-money">฿ {{formatAmount(interestmoney)}}</p>
					</view>
					<view v-if='isLate' class="flexrowspacebetween P-line">
						<p>{{$t('index.lateone')}} <br>
							({{$t('index.latetwo')}})</p>
						<p class="p-money">฿ {{formatAmount(latemoney)}}</p>
					</view>
				</view>
			</view>
			<view v-else class="P-switchView-left ">
				<!-- 		<view class="flexrowspacebetween">
					<view class="flexrowstart  P-switchView-left-1">
						<image src="../../static/twocode.png" mode=""></image>
						<P>
							{{$t('index.paytitle')}}
						</P>
					</view>
					<P class="btn" @click="openChannelMenu('00')">
						{{$t('index.payback')}}
					</P>
				</view> -->
				<view class="repayChannelPageView">
					<!-- 无网络 -->
					<view v-if="network == 'none'">
						<p style="width: 100%; text-align: center;color: #D39AF0;">请求超时，请检查网络</p>
						<view class="p-codebox flexcenter">
							<image class="networkerror" src="/static/nowifi.png" mode=""></image>
						</view>
					</view>
					<!-- 有网络 -->
					<view v-else>
						<view v-for="(item,index) in channelList" :key="index" class="channel flexrowspacebetween">
							<image :src="item.taqv" mode=""></image>
							<view class="btn" @click="repayFun(item)">
								{{$t('index.payback')}}
							</view>
						</view>
					</view>
				</view>

				<view class="P-switchView-left-2">
					<image src="../../static/banks/kplus.png" mode=""></image>
					<image src="../../static/banks/scb.png" mode=""></image>
					<image src="../../static/banks/krungthai.png" mode=""></image>
					<image src="../../static/banks/bualuang.png" mode=""></image>
					<image src="../../static/banks/mymo.png" mode=""></image>
					<image src="../../static/banks/thanachart.png" mode=""></image>
					<image src="../../static/banks/cimb.png" mode=""></image>
					<image src="../../static/banks/uob.png" mode=""></image>
					<image src="../../static/banks/kma.png" mode=""></image>
					<image src="../../static/banks/icbc.png" mode=""></image>
					<image src="../../static/banks/paymentonline.png" mode=""></image>
					<image src="../../static/banks/kkp.png" mode=""></image>
					<image src="../../static/banks/line.png" mode=""></image>
					<image src="../../static/banks/truemoney.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 展期 -->
		<uni-popup ref="extendDayPage" type="center" :animation="false" :is-mask-click="false">
			<view class="extendDayPage">
				<view class="Page-1">
					<view class="title">
						{{$t('index.extendday')}} <span style="color: #DF2020;">{{extenddayNUmber}}</span>
						{{$t('money.day')}}
					</view>
					<view class="P-item flexrowspacebetween bright" style="margin-top: 40rpx;">
						<p>{{$t('index.extenday')}}</p>
						<p>{{extendrepayday}}</p>
					</view>
					<view class="P-item flexrowspacebetween bottomborder">
						<p>{{$t('money.servicefee')}}</p>
						<p>฿ {{formatAmount(extedfee)}}</p>
					</view>
					<view class="P-item flexrowspacebetween">
						<p>{{$t('money.interest')}}</p>
						<p>฿ {{formatAmount(extendinterest)}}</p>
					</view>
					<view class="P-item flexrowspacebetween bright" style="margin-bottom: 40rpx;">
						<p>{{$t('index.paymoney')}}</p>

						<p>฿ {{formatAmount(extendshhouldpay)}}</p>
					</view>
					<view class="P-3" style="background-color: transparent;
					border: 2rpx solid #F54D4D;
					">
						<view class="flexcenter" style="margin-bottom: 20rpx;">
							<image src="../../static/redworning.png" mode=""></image>
							<p style="font-size: 36rpx;">{{$t('index.worning')}}</p>
						</view>
						ชำระครั้งเดียว ฿ {{formatAmount(extendshhouldpay)}} บาท ระยเวลาผ่อนชำระสามารถขยายออกไปได้อีก
						{{extenddayNUmber}} วัน
						สำหรับการชำระครั้งเดียวที่น้อยกว่า ฿ {{formatAmount(extendshhouldpay)}} บาท
						ระยะเวลาการชำระคืนจะไม่เปลี่ยนแปลง
						ชำระเงินตรงเวลา
					</view>
					<view class="P-22 flexcenter">
						<p>
							{{$t('index.payword')}}
						</p>
					</view>
					<view class="P-switchView-left" style="background: #ECECEC;">
						<!-- <view class="flexrowspacebetween">
							<view class="flexrowstart  P-switchView-left-1">
								<image src="../../static/twocode.png" mode=""></image>
								<P style="color: #000;">
									{{$t('index.paytitle')}}
								</P>
							</view>
							<P class="btn" @click="openChannelMenu('01')">
								{{$t('index.payback')}}
							</P>
						</view> -->
						<view class="repayChannelPageView">
							<!-- 无网络 -->
							<view v-if="network == 'none'">
								<p style="width: 100%; text-align: center;color: #D39AF0;">请求超时，请检查网络</p>
								<view class="p-codebox flexcenter">
									<image class="networkerror" src="/static/nowifi.png" mode=""></image>
								</view>
							</view>
							<!-- 有网络 -->
							<view v-else>
								<view v-for="(item,index) in channelList" :key="index"
									class="channel flexrowspacebetween">
									<image :src="item.taqv" mode=""></image>
									<view class="btn" @click="repayFun(item)">
										{{$t('index.payback')}}
									</view>
								</view>
							</view>
						</view>
						<view class="P-switchView-left-2">
							<image src="../../static/banks/kplus.png" mode=""></image>
							<image src="../../static/banks/scb.png" mode=""></image>
							<image src="../../static/banks/krungthai.png" mode=""></image>
							<image src="../../static/banks/bualuang.png" mode=""></image>
							<image src="../../static/banks/mymo.png" mode=""></image>
							<image src="../../static/banks/thanachart.png" mode=""></image>
							<image src="../../static/banks/cimb.png" mode=""></image>
							<image src="../../static/banks/uob.png" mode=""></image>
							<image src="../../static/banks/kma.png" mode=""></image>
							<image src="../../static/banks/icbc.png" mode=""></image>
							<image src="../../static/banks/paymentonline.png" mode=""></image>
							<image src="../../static/banks/kkp.png" mode=""></image>
							<image src="../../static/banks/line.png" mode=""></image>
							<image src="../../static/banks/truemoney.png" mode=""></image>
						</view>
					</view>
				</view>
				<u-icon @click="closePopup('extendDayPage')" class="iconposition" name="close-circle-fill"
					color="#D8D8D8" size="24"></u-icon>
			</view>
		</uni-popup>
		<uni-popup ref="repayChannelMenu" type="center" :animation="false" :is-mask-click="false">
			<view class="repayChannelMenu">
				<!-- 无网络 -->
				<view v-if="network == 'none'">
					<p style="width: 100%; text-align: center;color: #D39AF0;">请求超时，请检查网络</p>
					<view class="p-codebox flexcenter">
						<image class="networkerror" src="/static/nowifi.png" mode=""></image>
					</view>
				</view>
				<!-- 有网络 -->
				<view v-else>
					<view v-for="(item,index) in channelList" :key="index" class="channel flexrowspacebetween">
						<image :src="item.taqv" mode=""></image>
						<view class="btn" @click="repayFun(item)">
							{{$t('index.payback')}}
						</view>
					</view>
				</view>
				<u-icon @click="closePopup('repayChannelMenu')" class="iconposition" name="close-circle-fill"
					color="#86A8E7" size="24"></u-icon>
			</view>
		</uni-popup>
		<uni-popup ref="repayFun" type="center" :animation="false" :is-mask-click="false">
			<view class="repayFun">
				<view class="P-6">
					<p style="width: 100%;text-align: center; color: #000;
					font-size: 38rpx;
					margin-bottom: 20rpx;
					">QR {{$t('index.paycode')}}</p>

					<view class="content-1 flexcenter">
						<image src="../../static/worning.png" mode=""></image>
						<p>
							{{$t('qrcodemsg')}}
						</p>
					</view>

					<!-- 无网络 -->
					<!-- 		<view v-if="network == 'none'">
						<view class="p-codebox flexcenter">
							<image class="networkerror" src="/static/nowifi.png" mode=""></image>
						</view>
					</view> -->
					<!-- 有网络 开始-->
					<view>
						<view class="p-codebox flexcenter" v-if="showpayMethods=='1'">
							<image class="twocode" :src="twocodeSrc" mode=""></image>

						</view>
						<view class="p-codebox flexcenter" v-if="showpayMethods=='0'">
							<view class="canvas">
								<!-- 二维码插件 width height设置宽高 -->
								<canvas canvas-id="qrcode"
									:style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
							</view>
						</view>
						<p v-if="showpayMethods=='1'" style="color: #000;">
							{{$t('index.payurl')}}
							<!-- <span style="color: #D39AF0; text-decoration: underline;"></span> -->
							<u-link></u-link>
							<uni-link fontSize="12" color="#D39AF0" :href="twocodeSrc" :text="twocodeSrc"></uni-link>

						</p>
					</view>
					<!-- 有网络  结束-->
				</view>


				<u-icon @click="closePopup('repayFun')" class="iconposition" name="close-circle-fill" color="#86A8E7"
					size="24"></u-icon>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import api from '@/pages/utils/api.js';
	import setDot from '@/pages/utils/setdot.js';
	import formheadVue from '../../components/formhead.vue';
	import uQRCode from '@/uni_modules/cc-defineQRCode/components/cc-defineQRCode/common/uqrcode.js'
	export default {
		data() {
			return {
				isLate: false,
				showInfo: false,
				repayday: '',
				repaymoney: 0,
				interestmoney: 0,
				applymoney: 0,
				canextendDayNumber: 0,

				latedays: 0,
				latemoney: 0,

				channelList: [],
				currentChannelInfo: {},
				orderid: 0,
				//二维码
				showpayMethods: '', //如何在页面中展示
				twocodeSrc: '',

				// 二维码标识串
				qrcodeText: '',
				// 二维码尺寸
				qrcodeSize: 150,

				network: '',

				//extend
				extenddayNUmber: '', //lezt
				extendrepayday: '', //ione
				extedfee: 0, //hgph
				extendinterest: 0, ///mbdg
				extendshhouldpay: 0, //dlhh

				currentpaytype: '00',
				showImmediately: false


			}
		},
		components: {
			formheadVue
		},
		onShow() {
			this.checkNetworkType();
			this.getrepayChannelMethods()
		},
		mounted() {
			console.log('要立刻打开弹窗吗', this.showImmediately);
			if (this.showImmediately) {
				this.$refs.extendDayPage.open('bottom')
				this.getExtendOderdetailInfoMethods()
				this.currentpaytype = '01'
			} else {
				this.getOderdetailInfoMethods()
				this.currentpaytype = '00'
			}
		},
		onLoad(options) {
			let obj = JSON.parse(decodeURIComponent(options.currentclick))
			console.log('obj--》》', obj);
			this.repayday = obj.dfkw
			this.repaymoney = obj.xfjf
			this.applymoney = obj.mswl
			this.canextendDayNumber = obj.ione
			this.isLate = obj.viewStatus == '2' ? true : false
			this.orderid = obj.jcno
			console.log('拿到的订单id', this.orderid);
			if (this.isLate) {
				this.latedays = obj.rlqb
			}
			console.log('obj.clickextrendbtn', obj.clickextrendbtn);
			if (obj.clickextrendbtn) {
				this.showImmediately = true
			} else {
				this.showImmediately = false
			}
		},
		methods: {
			makeCode() {
				uQRCode.make({
					canvasId: 'qrcode',
					text: this.qrcodeText,
					size: this.qrcodeSize,
					margin: 0,
					success: res => {
						this.twocodeSrc = res
						console.log('twocodeSrc = ' + this.twocodeSrc);
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			repayFun(info) {
				this.currentChannelInfo = info
				console.log('当前选择的支付渠道信息', this.currentChannelInfo);
				this.repayInfo()
				this.closePopup('repayChannelMenu')
				setDot('CLICK_FULL_PAY_SUBMIT')
			},
			//还款的方法
			repayInfo() {
				api.repaymoney({
						fjqa: this.currentpaytype,
						jcno: this.orderid,
						hxvo: this.currentChannelInfo.hxvo,
					}).then((data) => {
						console.log('查到了点啥', data);
						//0 二维码源码 1 二维码链接url 2 网页链接
						this.showpayMethods = data.repayType
						this.twocodeSrc = data.linkUrl
						switch (data.repayType) {
							case '0':
								this.qrcodeText = data.linkUrl
								this.makeCode()
								this.$refs.repayFun.open('center')
								break;
							case '1':
								this.$refs.repayFun.open('center')
								break;
							case '2':
								console.log('走到了这里');
								// #ifdef H5 
								window.open(data.linkUrl, '_blank');
								// #endif

								// #ifdef APP-PLUS
								plus.runtime.openURL(data.linkUrl);
								// #endif
								break;
							default:
								break;
						}

					})
					.catch((err) => {
						console.log('还款失败', err);
					});
			},
			closePopup(refName) {
				const ref = this.$refs[refName];
				if (refName == 'extendDayPage') {
					this.currentpaytype = '00'
					if (this.showImmediately) {

						//重新获取订单详情
						this.getOderdetailInfoMethods()
					}
				}
				if (ref && typeof ref.close === 'function') {
					ref.close();
				}
			},
			openChannelMenu(type) {
				this.currentpaytype = type
				if (type == '01') {
					// this.closePopup('extendDayPage')
				}
				this.$refs.repayChannelMenu.open('center')
			},
			openExtendPage() {
				this.getExtendOderdetailInfoMethods()
			},
			getrepayChannelMethods() {
				api.getrepayChannel({

					}).then((data) => {
						console.log('有哪些支付方式', data);
						this.channelList = data

					})
					.catch((err) => {
						console.log('支付方式获取失败', err);
					});
			},
			formatAmount(amount) {
				const number = parseFloat(amount);
				if (isNaN(number)) return '0';
				const isInteger = Number.isInteger(number);

				// 格式化为字符串，并添加千位分隔符
				const parts = number
					.toFixed(isInteger ? 0 : 2)
					.split('.');

				parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');

				return parts.join('.');
			},
			getOderdetailInfoMethods() {
				console.log(' this.orderid--》》', this.orderid);
				api.getOderdetailInfo({
						jcno: this.orderid,
						fjqa: '00'
					}).then((data) => {
						console.log('订单详情', data);
						this.interestmoney = data.mbdg
						this.latemoney = data.qtfa
						console.log('利息拿到了吗', this.interestmoney);
					})
					.catch((err) => {
						console.log('订单详情', err);
					});
			},
			getExtendOderdetailInfoMethods() {
				api.getOderdetailInfo({
						jcno: this.orderid,
						fjqa: '01'
					}).then((data) => {
						console.log('展期订单详情', data);
						this.extenddayNUmber = data.ione
						this.extendrepayday = data.lezt
						this.extedfee = data.hgph
						this.extendinterest = data.mbdg
						this.extendshhouldpay = data.xfjf
						this.$refs.extendDayPage.open('bottom')
						this.currentpaytype = '01'

					})
					.catch((err) => {
						console.log('展期订单详情', err);
					});
			},
			switchView(name) {
				if (name == 'left') {
					this.showInfo = false
				} else {
					this.showInfo = true
				}
			},
			checkNetworkType() {

				uni.getNetworkType({
					success: (res) => {
						console.log('当前网络状态', res);
						this.network = res.networkType;
						console.log('当前网络状态--》》', this.network);
					}
				});


			},
		}
	}
</script>

<style lang="scss" scoped>
	.extendDayPage {
		width: 100vw;
		position: relative;
		background-color: transparent;
		padding: 80rpx 0 0 0;
		box-sizing: border-box;
		z-index: 0;


		.P-22 {
			p {
				width: 46%;
				text-align: center;
				background-color: #BCA3F3;
				color: #000;
				padding: 22rpx 0;
			}
		}

		.Page-1 {
			width: 100%;
			height: 88vh;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
			color: #3F354B;
			padding: 30rpx;
			overflow-y: scroll;

			.title {
				width: 100%;
				text-align: center;
				font-size: 36rpx;

			}

			.P-item {
				padding: 26rpx 30rpx;
				border-radius: 10rpx;
				height: 50rpx;
				font-size: 14px // p :nth-child(2) {
				// 	width: 200rpx;
				// 	text-align: end;
				// }
				// p :nth-child(1) {
				// 	width: 300rpx;
				// 	background-color: pink !important;
				// }
			}

			.bright {
				background-color: #ECECEC;
			}

			.bottomborder {
				border-bottom: 8rpx solid #ECECEC;
			}
		}

		.iconposition {
			position: absolute;
			top: 0rpx;
			right: 20rpx;
		}
	}

	.repayFun {
		.canvas {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			text-align: center;
		}

		width: 90vw;
		height: fit-content;
		box-sizing: border-box;
		padding-top: 70rpx;
		position: relative;
		z-index: 9999;

		.iconposition {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}

		.p-codebox {
			width: 100%;
			margin: 20rpx 0;
		}

		.P-6 {
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			font-size: 12px;
			margin: 40rpx 0rpx 30rpx 0;

			.content-1 {
				box-sizing: border-box;
				color: #333333;
				background-color: #ECECEC;
				border-radius: 20rpx;
				padding: 20rpx;

				image {
					width: 43rpx;
					height: 43rpx;
				}

				p {
					margin-left: 20rpx;
					width: 86%;
				}

			}

			.twocode {
				width: 250rpx;
				height: 250rpx;
			}

		}

	}

	.networkerror {
		width: 300rpx !important;
		height: 300rpx !important;
	}

	.repayChannelPageView {
		width: 100%;
		height: fit-content;
		box-sizing: border-box;
		position: relative;
		border-radius: 20rpx;

		.iconposition {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}


		image {
			width: 300rpx;
			height: 80rpx;
		}

		.btn {
			margin: 20rpx 0;
			background: #FFF584;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			color: #fff;
			padding: 10rpx 50rpx;
			color: #000;
			border-radius: 20rpx;
			transition: all 0.2s;
		}

		.bt:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

	}

	.repayChannelMenu {
		width: 90vw;
		height: fit-content;
		// background-image: url('../../static/bg.png');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
		background-color: #fff;
		padding: 40rpx;
		box-sizing: border-box;
		padding-top: 70rpx;
		position: relative;
		z-index: 999;
		border-radius: 20rpx;

		.iconposition {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}


		image {
			width: 300rpx;
			height: 80rpx;
		}

		.btn {
			margin: 20rpx 0;
			background: linear-gradient(to right, #7F7FD5, #86A8E7);
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			color: #fff;
			padding: 10rpx 50rpx;
			color: #000;
			border-radius: 20rpx;
			transition: all 0.2s;
		}

		.bt:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

	}

	.flexrowspacearound {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.P-infos {
		margin: 20rpx 0 40rpx 0;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}

		color: #fff;

		.day {
			font-size: 38rpx;
			font-weight: bold;
		}
	}

	.P-head {
		width: 100%;
		background-color: #1F2022;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: -110rpx;
		color: #D099F1;
	}


	.gradient-text {
		font-size: 70rpx;
		font-weight: bold;
		background-image: linear-gradient(to bottom, #CD99F3 0%, #CD99F3 40%, #FBE4B9 100%);
		-webkit-background-clip: text;
		color: transparent;
	}

	.P-1 {
		width: 100%;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		background-image: url('../../static/bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: fit-content;
		padding: 40rpx 60rpx;
		box-sizing: border-box;

		.infos {
			width: 100%;
			margin: 40rpx 0;
			font-size: 14px;
		}
	}


	.flexrowspacebetween {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexrowstart {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flexcenter {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.P-2 {
		width: 100%;

		p {
			width: 48%;
			height: 100rpx;
			background-color: #FFF584;
			text-align: center;
			color: #000;
			border-radius: 20rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;
			font-size: 14px;

		}

		p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}


	}

	.P-3 {
		border-radius: 30rpx;
		background-color: #393A3D;
		color: #FF8484;
		font-size: 14px;
		padding: 30rpx;
		margin: 0rpx 0 30rpx 0;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
	}

	.P-switch {
		p {
			width: 46%;
			text-align: center;
			background-color: #342C42;
			color: #FFFFFF;
			padding: 22rpx 0;
		}
	}

	.P-switchView-right {
		border-radius: 20rpx;
		background-color: #454649;
		margin: 30rpx 0;
		box-sizing: border-box;
		padding: 30rpx 0rpx;
		color: #FFFFFF;

		.P-line {
			padding: 10rpx 20rpx;
		}

		.P-line :nth-child(1) {
			min-width: 60%;
			text-align: start;
		}

		.pline {
			height: 10rpx;
			width: 100%;
			background-color: #393A3D;
			margin: 20rpx 0;
		}

		.p-money {
			width: 300rpx;
			text-align: end;
		}
	}

	.P-switchView-left {
		border-radius: 20rpx;
		background-color: #393A3D;
		margin: 30rpx 0;
		box-sizing: border-box;
		padding: 30rpx;
		color: #000;

		.P-switchView-left-1 {
			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 30rpx;
			}

			P {
				color: #FFF;
			}
		}

		.btn {
			background-color: #FFF584;
			padding: 20rpx 60rpx;
			border-radius: 20rpx;
			transition: all 0.2s;

		}

		.btn:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		.P-switchView-left-2 {
			background-color: #FFF;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start; // 避免两端对齐造成图片间距过大

			image {
				width: 18%; // 每行4个，稍小于25%以留出间距
				height: 110rpx;
				border-radius: 10rpx;
				margin-bottom: 60rpx;
				margin-right: 9%; // 每个图片右边留点间距
			}

			// 去掉每行最后一个图片的右间距，避免右边多出空间
			image:nth-child(4n) {
				margin-right: 0;
			}
		}
	}
</style>